<template>
	<div id="goods">
		<div class="left" ref="menuWrapper">
			<ul>
				<li class="menu-item" v-for="(item,index) in goods" :class="{'active':currentIndex === index}" @click = 'selectMenu(index)'>
					<span><i v-show="item.type>0" class="menu-icon" :class="iconMap[item.type]"></i>{{item.name}}</span>
				</li>
			</ul>
		</div>
		<div class="right" ref="foodsWrapper">
      <ul>
        <div class="voucher"></div>
  			<li v-for="item in goods" ref="foodList" >
          <span class="title">{{item.name}}</span>
          <ul v-for="food in item.foods" @click="selectFood(food)">
            <li class="food-item">
              <div class="food-img">
                <img v-bind:src='food.image'>
              </div>
              <div class="food-con">
                <div class="name">{{food.name}}</div>
                <div class="description"><span class="sellCount">月售{{food.sellCount}}　</span>{{food.description}}</div>
                <div class="info">{{food.info}}</div>
                <div class="price">¥<span>{{food.price}}.0</span><a>{{food.oldPrice}}</a></div>
              </div>
              <!-- 增减商品 -->
              <cartcontrol :food="food"></cartcontrol>
            </li>
          </ul>
  			</li>
      </ul>
		</div>
    <!-- food详情 -->
    <food :food="food" ref="food"></food>
    <!-- 底部购物车 -->
    <shopcart :foodList="foodList"></shopcart>
	</div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable  */
import BScroll from 'better-scroll'
import food from 'components/food/food.vue'
import shopcart from 'components/shopcart/shopcart.vue'
import cartcontrol from 'components/cartcontrol/cartcontrol.vue'

export default {
  data () {
    return {
      goods: [],
      listHeight: [],
      scrollY: 0,
      food: {}// 所选择的food 会在详情页面展示 对象
    }
  },
  created () {
    // type class contact
  	this.iconMap = ['special','decrease','discount','guarantee','inovice']
    this.$http.get('./static/data.json').then(res => {
      this.goods = res.body.goods
      this.$nextTick(() => {// exectue after DOM update
        this._initScroll()// initial better-scroll
        this._calculateHeight()// obtain foodlist item height
      })
    })
  },
  methods: {
  	_initScroll () {//
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
            click: true// enable click event
        })
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
            click: true,
            probeType: 3
        })
        this.foodsScroll.on('scroll', (pos) => {// return objectX、Y coordinate
            this.scrollY = Math.abs(Math.round(pos.y))// Math.abs return absolute value
        });
    },
    _calculateHeight () {
      let foodHeight = this.$refs.foodList// otain all DOM li
      let height = 0
      this.listHeight.push(height)// push first num to array
      for(let i = 0;i < foodHeight.length;i ++){
        // this height is total height of scroll ***
        height += foodHeight[i].clientHeight
        this.listHeight.push(height)// push all height of li to array
      }
    },
    selectMenu (index) {
      let foodList = this.$refs.foodList
      let el =foodList[index]
      this.foodsScroll.scrollToElement(el, 500)
    },
    selectFood (food) {
      console.log(food.name)
      this.food = food
      this.$refs.food.show()
    }
  },
  computed: {
    currentIndex () {
      for(let i = 0 ; i < this.listHeight.length ; i ++){
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        if (!height2 || (this.scrollY>=height1 && this.scrollY < height2)) {
          return i
        }
      }
      return 0
    },
    foodList () {
      let foods = []
      this.goods.forEach ((good)=>{// 循环遍历了所有商品
        good.foods.forEach ((food)=>{
          if (food.count) {// 如果这个商品的数目为true则说明这个商品被选中了
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  components: {
    food,
    shopcart,
    cartcontrol
  }
}
</script>

<style>
  #goods{display: flex; position: absolute; top: 184px;/*overflow: hidden;*/ width: 100%; z-index: 1;font-family: '微软雅黑'; bottom: 0; padding-bottom: 48px;}
  .left{ background: #f3f5f7; }
  .left ul{ flex-direction: column;}
  .left ul li{height: 54px; display: flex;justify-content: center; align-items: center;}
  .active{ background:#fff; color: #000; font-weight: bold;}
  .active:after{content: ""; width: 6px; height: 50%; background:#fcd361; position: absolute; left: 0; border-radius: 3px;}
  .right{flex: 1; height: 100%; overflow: hidden;}
  .menu-item{font-size: 12px; width: 86px; padding: 0 12px; line-height: 16px; position: relative;}
  .menu-item i{ display:inline-block; }
  .menu-icon.discount{ background: url(./special_3@2x.png); width: 12px; height: 12px; background-size: 100%; vertical-align: text-top;margin-right: 4px;}
  .menu-icon.decrease{ background: url(./discount_3@2x.png); width: 12px; height: 12px; background-size: 100%; vertical-align: text-top;margin-right: 4px;}
  .title{ background: #f3f5f7; display: block; font-size: 12px; color: #93999f; line-height: 26px; padding-left: 18px;}
  .food-img{ width: 57px; height: 57px;}
  .food-img img{ width: 100%; height: 100%; border-radius: 4px;}
  .food-item{ display: flex;padding: 8px 20px; border-bottom: #f1f1f1 1px solid; position: relative;}
  .food-con{flex: 1; padding: 0 0 0 18px}
  .info{ color: #999; font-size: 12px;line-height: 16px; }
  .price{ color: red; font-size: 13px; margin-top: 6px;}
  .price span{ font-size: 20px;}
  .price a{ color: #999; text-decoration: line-through;}
  .voucher{background: #f3f5f7;}
  .description{ color: #666; font-size: 12px; line-height: 16px;padding-top: 6px;}
  .food-con .name{font-size: 16px; color: #333;}
</style>
